<template>
	<div>
		<div id="app">
			<el-container>
				<el-main>
					<el-carousel :interval="5000" arrow="always">
						<el-carousel-item v-for="(item,index) in img" :key="index">
							<h3>
								<img :src="item.src" alt="">
							</h3>
						</el-carousel-item>
					</el-carousel>
					<p class="pp">HELP CENTER</p>
					<div class="app1">
						<v-card>
							<v-tabs v-model="tab" background-color="primary" dark centered>
								<v-tab style="margin-left: 450px;">
									会员手册
								</v-tab>
								<v-tab>
									常用帮助
								</v-tab>
							</v-tabs>

							<v-tabs-items v-model="tab">
								<v-tab-item>
									<v-card flat>
										<v-card-text class="cla">
											<ul>


												<li>
													<a href="#"><img src="../images/151.jpg" alt=""></a>
												</li>

												<li><a href="#"><img src="../images/152.jpg" alt=""></a></li>
												<li><a href="#"><img src="../images/153.jpg" alt=""></a></li>
												<li><a href="#"><img src="../images/154.jpg" alt=""></a></li>
												<li style="margin-top: 20px;margin-bottom: 20px;"><a href="#"><img src="../images/151.jpg" alt=""></a></li>
											</ul>
										</v-card-text>
									</v-card>
								</v-tab-item>
								<v-tab-item>
									<v-card flat>
										<v-card-text class="cla">
											<ul>
											
											
												<li>
													<a href="#"><img src="../images/151.jpg" alt=""></a>
												</li>
											
												<li><a href="#"><img src="../images/152.jpg" alt=""></a></li>
												<li><a href="#"><img src="../images/153.jpg" alt=""></a></li>
												<li><a href="#"><img src="../images/154.jpg" alt=""></a></li>
												<li style="margin-top: 20px;margin-bottom: 20px;"><a href="#"><img src="../images/151.jpg" alt=""></a></li>
											</ul>
										</v-card-text>
									</v-card>
								</v-tab-item>
							</v-tabs-items>
						</v-card>
					</div>

				</el-main>
			</el-container>
		</div>
		<div class="app2">
			<fotter></fotter>
		</div>
	</div>
</template>


<script>
	// import fang from './fang60.vue'
	import fotter from "./common/footer.vue"
	export default {
		components: {
			fotter
		},
		data() {
			return {
				img: [{
						src: require('../images/003.jpg')
					}, {
						src: require('../images/004.jpg')
					},
					{
						src: require('../images/005.jpg')
					}
				],
				tab: null,
				items: [{
						tab: 'One',
						content: 'Tab 1 Content'
					},
					{
						tab: 'Two',
						content: 'Tab 2 Content'
					},
				],
				activeName: 'second'

				// d1: ['公司地址:山东省济南市历城区银河大厦', '***全国客服热线:400-000-888', '***全国投诉电话:400-000-999', '***服务监督电话:400-000-555']

			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			}
		},

	}
</script>

<style scoped>
	.cla ul li {
	
		background-color: rgb(32, 32, 32);
		float: left;
		width: 250px;
		height: 200px;
		border: 1px solid #000000;
		margin-left: 10px;
	}

	.cla ul li:hover {
		
		border: 10px solid rgb(255, 227, 120);
		
	}

	.app1 img {
		width: 100%;
		height: 100%;
	}

	.pp {
		height: 70px;
		position: absolute;
		top: 430px;
		left: 600px;
		font-size: 50px;
		color: rgb(255, 227, 120);
		padding: 1px;
	}

	.app1 {
		position: absolute;
		top: 530px;
		left: 180px;
		width: 1200px;
		height: 500px;
		margin: 0 auto;
		border: 1px solid #000000;
		padding: 1px;
	}


	.card1 {
		margin-left: 300px;

	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 14px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 480px;
		background-color: #B3C0D1;
		border: 0px;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;

		height: 1000px;
	}


	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>
